var header = document.querySelector('header');

var slideshow = document.querySelector('.slideshow');
var list = document.querySelector('.list');
var slideshow = document.querySelector('.slideshow');
var item = document.querySelectorAll('.item');

var ntcTit = document.querySelector('.ntc-tit');
var ntcCon = document.querySelector('.ntc-con');

var secKinds = document.querySelector('.sec-kinds');

var horse = document.querySelector('.horse');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');

var testWrap = document.querySelector('.test .wrap');

var haohuo = document.querySelector('.module');
var tuijian = document.querySelector('.tuijian');

var saleWrap = document.querySelector('.sale .wrap');

var projectWrap = document.querySelector('.project .wrap');

var aside = document.querySelector('aside');
var reTop = document.querySelector('.reTop');
var sCar = document.querySelector('.sCar');
var closeDom = document.querySelector('.close');

var floor = document.querySelector('.floor');
var floorItem = document.querySelectorAll('.floor-item');
var totop = document.querySelector('.totop');
var section = document.querySelectorAll('section');


// _______________关闭页头_______________
header.children[0].children[1].onclick = function() {
    header.remove();
}


// _______________轮播图_______________
var liDom = list.children;
var timeId = null;
var timeId2 = null;
var num = 0;
var count = 0;
// 缓慢动画
function slowMove(dom, target) {
    clearInterval(timeId);
    timeId = setInterval(function() {
        if (dom.offsetLeft == target) {
            clearInterval(timeId);
        } else {
            var speed = (target - dom.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            dom.style.left = dom.offsetLeft + speed + 'px';
        }
    }, 20)
}

// 自动轮播
function autoPlay() {
    clearInterval(timeId2);
    timeId2 = setInterval(function() {
        num++;
        count++;
        if (num > item.length - 1) {
            num = 0;
        }
        if (count > liDom.length - 1) {
            list.style.left = 0;
            count = 1;
        }
        for (var i = 0; i < item.length; i++) {
            item[i].className = 'item';
        }
        item[num].className = 'item on';
        var target = count * liDom[0].offsetWidth;
        slowMove(list, -target);
    }, 2000)
}
autoPlay();

// 鼠标移入暂停,移出继续
slideshow.onmouseenter = function() {
    clearInterval(timeId2);
}
slideshow.onmouseleave = function() {
    autoPlay();
}

// 焦点轮播
for (var i = 0; i < item.length; i++) {
    item[i].index = i;
    item[i].onclick = function() {
        for (var j = 0; j < item.length; j++) {
            item[j].className = 'item'
        }
        this.className = 'item on';
        var target = this.index * liDom[0].offsetWidth;
        slowMove(list, -target);
        count = this.index;
        num = this.index;
    }
}


// _______________公告促销_______________
for (var i = 0; i < ntcTit.children.length; i++) {
    ntcTit.children[i].index = i;
    ntcTit.children[i].onmouseenter = function() {
        for (var j = 0; j < ntcTit.children.length; j++) {
            ntcTit.children[j].className = '';
            ntcCon.children[j].style.display = 'none';
        }
        this.className = 'clr';
        ntcCon.children[this.index].style.display = 'block';
    }
}


// _______________二级导航_______________
var knum = 0;
var xhr = new XMLHttpRequest();
xhr.open('get', './data.json');
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200 && xhr.status < 300 || xhr.status == 304) {
            var data = JSON.parse(xhr.responseText);
            data.forEach(function(v) {
                v.kinds.forEach(function(kv) {
                    kv.knav.forEach(function(knv, index) {
                        secKinds.innerHTML += `
                        <li>
                            <div class="k-nav">
                                <i class="iconfont ${knv.i}"></i>
                                <div class="k-con">
                                    <a href="#" class="k-title">${knv.ktitle}</a>
                                    <p>
                                        <a href="#">${knv.a1}</a>
                                        <a href="#">${knv.a2}</a>
                                    </p>
                                </div>
                            </div>
                            <div class="k-dorp">
                                <div class="dorp-left">
                                    <div class="dorp-ch">
                                    </div>
                                    <div class="dorp-con">
                                    </div>
                                </div>
                                <div class="dorp-right">
                                    <div class="dorp-brand">
                                    </div>
                                </div>
                            </div>
                        </li>
                        `
                        var dorpCh = document.querySelectorAll('.dorp-ch');
                        var dorpCon = document.querySelectorAll('.dorp-con');
                        var dorpright = document.querySelectorAll('.dorp-right');
                        var dorpbrand = document.querySelectorAll('.dorp-brand');
                        knv.kdorp.forEach(function(kdp) {
                            kdp.dorpleft.forEach(function(kdlt) {
                                kdlt.dorpch.forEach(function(kdpch) {
                                    for (var key in kdpch) {
                                        dorpCh[index].innerHTML += `
                                        <a href="#">${kdpch[key]}</a>
                                        `
                                    }
                                })
                                kdlt.dorpcon.forEach(function(kdpcon) {
                                    dorpCon[index].innerHTML += `
                                    <dl>
                                        <dt>${kdpcon.dt}</dt>
                                        <dd></dd>
                                    </dl>
                                    `
                                    var dl = document.querySelectorAll('.dorp-con dl');
                                    for (var key in kdpcon) {
                                        if (key != 'dt') {
                                            dl[knum].children[1].innerHTML += `
                                            <a href="#">${kdpcon[key]}</a>
                                            `
                                        }
                                    }
                                    knum++;
                                })
                            })
                            kdp.dorpright.forEach(function(kdrg) {
                                for (var key in kdrg) {
                                    if (key != 'imgO') {
                                        dorpbrand[index].innerHTML += `
                                        <img src="${kdrg[key]}">
                                        `
                                    }
                                }
                                dorpright[index].innerHTML += `
                                <img src="${kdrg.imgO}" class=".dorp-prom">
                                `
                            })
                        })
                    })
                })
            })
        }
    }
}


// _______________秒杀活动_______________
var horsetimeID = null;
var xhr2 = new XMLHttpRequest();
xhr2.open('get', './data.json');
xhr2.send();
xhr2.onreadystatechange = function() {
    if (xhr2.readyState == 4) {
        if (xhr2.status == 200 && xhr2.status < 300 || xhr2.status == 304) {
            var data2 = JSON.parse(xhr2.responseText);
            data2.forEach(function(v) {
                v.horse.forEach(function(hv) {
                    horse.children[0].innerHTML += `
                    <li>
                        <a href="#" class="horse-img">
                            <img src="${hv.img}">
                        </a>
                        <a href="#" class="horse-name">${hv.name}</a>
                        <div class="horse-price">
                            <span>${hv.price}</span>
                            <span>${hv.old}</span>
                        </div>
                    </li>
                    `
                    horse.children[1].innerHTML += `
                    <li>
                        <a href="#" class="horse-img">
                            <img src="${hv.img}">
                        </a>
                        <a href="#" class="horse-name">${hv.name}</a>
                        <div class="horse-price">
                            <span>${hv.price}</span>
                            <span>${hv.old}</span>
                        </div>
                    </li>
                    `
                })
            })
        }
    }
}

var horsenum = horse.offsetLeft;

function moveHoure() {
    horsetimeID = setInterval(function() {
        horsenum -= 2;
        if (-horsenum > horse.offsetWidth / 2) {
            horse.style.left = 5 + 'px';
            horsenum = horse.offsetLeft;
        } else {
            horse.style.left = horsenum + 'px';
        }
    }, 40)
}
moveHoure();
horse.parentNode.onmouseenter = function() {
    clearInterval(horsetimeID);
    prev.style.display = "block";
    next.style.display = "block";
}
horse.parentNode.onmouseleave = function() {
    moveHoure();
    prev.style.display = "none";
    next.style.display = "none";
}
prev.onclick = function() {
    horse.style.left = horsenum + 238 + 'px';
    horsenum = horse.offsetLeft;
}
next.onclick = function() {
    if (-horsenum > horse.offsetWidth / 2) {
        horse.style.left = 5 + 'px';
        horsenum = horse.offsetLeft;
    }
    horse.style.left = horsenum - 238 + 'px';
    horsenum = horse.offsetLeft;
}


// _______________测试楼层_______________
var xhr3 = new XMLHttpRequest();
xhr3.open('get', './data.json');
xhr3.send();
xhr3.onreadystatechange = function() {
    if (xhr3.readyState == 4) {
        if (xhr3.status == 200 && xhr3.status < 300 || xhr3.status == 304) {
            var data3 = JSON.parse(xhr3.responseText);
            data3.forEach(function(v) {
                v.test.forEach(function(tv) {
                    tv.testtit.forEach(function(ttv, index) {
                        testWrap.innerHTML += `
                        <div class="test-common">
                            <div class="test-tit">
                                <div class="tit-name">${ttv.titname}</div>
                                <div class="keyword">
                                </div>
                            </div>
                            <div class="test-con">
                                <a href="#" class="test-lf">
                                </a>
                                <div class="test-rg">
                                </div>
                                <div class="test-btm">
                                </div>
                            </div>
                        </div>
                        `
                        var keyword = document.querySelectorAll('.keyword');
                        var testlf = document.querySelectorAll('.test-lf');
                        var testrg = document.querySelectorAll('.test-rg');
                        var testbtm = document.querySelectorAll('.test-btm');
                        ttv.testkw.forEach(function(tkv) {
                            for (var key in tkv) {
                                keyword[index].innerHTML += `
                                <a href="#">${tkv[key]}</a>
                                `
                            }
                        })
                        ttv.testcon.forEach(function(tcv) {
                            tcv.testlf.forEach(function(tlf) {
                                testlf[index].innerHTML += `
                                <img src="${tlf.img}">
                                <div class="test-info">
                                    <span>${tlf.span}</span>
                                    <span>${tlf.span1}</span>
                                </div>
                                `
                            })
                            tcv.testrg.forEach(function(trg, i) {
                                if (i < 4) {
                                    testrg[index].innerHTML += `
                                    <a href="#">
                                        <span>${trg.name}</span>
                                        <span>${trg.tips}</span>
                                        <img src="${trg.img}">
                                    </a>
                                    `
                                } else if (i >= 4) {
                                    testbtm[index].innerHTML += `
                                    <a href="#">
                                        <span>${trg.name}</span>
                                        <span>${trg.tips}</span>
                                        <img src="${trg.img}">
                                    </a>
                                    `
                                }

                            })
                        })
                    })
                })
            })
        }
    }
}


// _______________发现好货_______________
var xhr4 = new XMLHttpRequest();
xhr4.open('get', './data.json');
xhr4.send();
xhr4.onreadystatechange = function() {
    if (xhr4.readyState == 4) {
        if (xhr4.status == 200 && xhr4.status < 300 || xhr4.status == 304) {
            var data4 = JSON.parse(xhr4.responseText);
            data4.forEach(function(v) {
                v.find.forEach(function(fv) {
                    haohuo.innerHTML += `
                    <div class="module-tit">
                        <span>发现好货</span>
                        <a href="#">更多好货 ></a>
                    </div>
                    <div class="module-con">
                        <ul>
                            <li class="md-first">
                                <img src="./images/p47.jpg" alt="">
                                <p>阿迪达斯三叶草</p>
                                <span>也许是每一款经典系列都应该有一个独特的故事吧</span>
                                <a href="#">点击查看</a>
                            </li>
                        </ul>
                    </div>
                    `
                    tuijian.innerHTML += `
                    <div class="module-tit">
                        <span>特色推荐</span>
                        <a href="#">更多特色推荐 ></a>
                    </div>
                    <div class="tuijian-con">
                        <div class="line"></div>
                    </div>
                    `
                    var haohuoUl = document.querySelector('.module-con ul');
                    var tuijianCon = document.querySelector('.tuijian-con');
                    fv.module.forEach(function(fm) {
                        haohuoUl.innerHTML += `
                        <li>
                            <a href="#">
                                <img src="${fm.img}">
                            </a>
                            <div>
                                <span>${fm.name}</span>
                                <span>${fm.intro}</span>
                            </div>
                        </li>
                        `
                    })
                    fv.tuijian.forEach(function(ft) {
                        tuijianCon.innerHTML += `
                        <div class="tuijian-item">
                            <a href="#">
                                <span>${ft.tit}</span>${ft.tell}
                            </a>
                            <img src="${ft.img}">
                        </div>
                        `
                    })
                })
            })
        }
    }
}


// _______________商创特卖_______________
var xhr5 = new XMLHttpRequest();
xhr5.open('get', './data.json');
xhr5.send();
xhr5.onreadystatechange = function() {
    if (xhr5.readyState == 4) {
        if (xhr5.status == 200 && xhr5.status < 300 || xhr5.status == 304) {
            var data5 = JSON.parse(xhr5.responseText);
            data5.forEach(function(v) {
                v.sale.forEach(function(sv) {
                    sv.saletit.forEach(function(stv, index) {
                        saleWrap.innerHTML += `
                        <div class="sale-common">
                            <div class="sale-tit">
                                <span>${stv.title}</span>
                                <a href="#">${stv.more}</a>
                            </div>
                            <div class="sale-con">
                            </div>
                        </div>
                        `
                        var saleCommon = document.querySelectorAll('.sale-common');
                        var saleCon = document.querySelectorAll('.sale-con');
                        if (index == 0) {
                            saleCon[index].innerHTML += `
                            <ul>
                            </ul>
                            `
                            stv.goods.forEach(function(stg) {
                                saleCon[index].children[0].innerHTML += `
                                <li>
                                    <span>${stg.name}</span>
                                    <span>${stg.free}</span>
                                    <img src="${stg.img}">
                                </li>
                                `
                                saleCon[index].children[0].children[0].className = "sale-first";
                            })
                        } else if (index == 1) {
                            saleCommon[index].className = "sale-common new";
                            saleCon[index].innerHTML += `
                            <ul>
                            </ul>
                            `
                            stv.goods.forEach(function(stg) {
                                saleCon[index].children[0].innerHTML += `
                                <li>
                                    <span>${stg.name}</span>
                                    <span>${stg.free}</span>
                                    <img src="${stg.img}">
                                </li>
                                `
                            })
                        } else if (index == 2) {
                            saleCommon[index].className = "sale-common paimai";
                            saleCon[index].innerHTML += `
                            <div class="paimai-con">
                            </div>
                            <div class="paimai-con">
                            </div>
                            `
                            stv.goods.forEach(function(stg, ix) {
                                if (ix < 3) {
                                    saleCon[index].children[0].innerHTML += `
                                    <a href="#">
                                        <img src="${stg.img}">
                                        <span>${stg.name}</span>
                                        <span>${stg.price}</span>
                                        <i>${stg.i}</i>
                                    </a>
                                    `
                                }
                                if (ix >= 3) {
                                    saleCon[index].children[1].innerHTML += `
                                    <a href="#">
                                        <img src="${stg.img}">
                                        <span>${stg.name}</span>
                                        <span>${stg.price}</span>
                                        <i>${stg.i}</i>
                                    </a>
                                    `
                                }
                            })
                        }

                    })
                })
            })
        }
    }
}


// _______________还没逛够_______________
var xhr6 = new XMLHttpRequest();
xhr6.open('get', './data.json');
xhr6.send();
xhr6.onreadystatechange = function() {
    if (xhr6.readyState == 4) {
        if (xhr6.status == 200 && xhr5.status < 300 || xhr5.status == 304) {
            var data6 = JSON.parse(xhr6.responseText);
            data6.forEach(function(v) {
                v.project.forEach(function(pv) {
                    pv.goods.forEach(function(pgv) {
                        projectWrap.innerHTML += `
                        <a href="#" class="project-con">
                            <img src="${pgv.img}">
                            <span>${pgv.name}</span>
                            <div class="price">
                                <div>${pgv.price}</div>
                                <i>${pgv.old}</i>
                            </div>
                        </a>
                        `
                    })
                })
            })
        }
    }
}


// _______________侧边栏_______________
aside.style.height = document.documentElement.clientHeight + 'px';
window.onresize = function() {
    aside.style.height = document.documentElement.clientHeight + 'px';
}

window.onscroll = function() {
    //当页面不在最顶部时，显示retop 
    if (document.documentElement.scrollTop > 0) {
        reTop.style.display = 'block';
    } else {
        reTop.style.display = 'none';
    }
    // 显示楼层导航
    if (document.documentElement.scrollTop >= (section[3].offsetTop - 61)) {
        floor.style.transform = 'scale(1)';
    } else {
        floor.style.transform = 'scale(0.000000000001)';
    }
    // 滚动滚轮时楼层变化
    section.forEach(function(sv, sub) {
        if (sub >= 3) {
            if (document.documentElement.scrollTop >= (sv.offsetTop - 61)) {
                floorItem.forEach(function(frv) {
                    frv.className = 'floor-item';
                })
                floorItem[sub - 3].className = 'floor-item active';
            }
        }
    })
}

// 回到顶部
var asideTimeID = null;
reTop.onclick = function() {
    clearInterval(asideTimeID);
    asideTimeID = setInterval(function() {
        if (document.documentElement.scrollTop > 0) {
            document.documentElement.scrollTop -= 100;
        } else {
            clearInterval(asideTimeID);
        }
    }, 10)
}

// 展开购物车
var flag = true;
sCar.onclick = function() {
    if (flag) {
        this.style.background = '#f42424';
        this.children[2].style.background = '#fff';
        this.children[2].style.color = '#f42424';
        aside.style.width = '320px';
        flag = false;
    } else {
        this.removeAttribute('style');
        this.children[2].removeAttribute('style');
        aside.style.width = '40px';
        flag = true;
    }
}

// 点击关闭按钮关闭购物车
closeDom.onclick = function(e) {
    var e = e || window.event;
    e.preventDefault();
    flag = true;
    sCar.removeAttribute('style');
    sCar.children[2].removeAttribute('style');
    aside.style.width = '40px';
}


// _______________楼层导航_______________
//点击楼层导航变化 
floorItem.forEach(function(flr, index) {
    flr.addEventListener('click', function() {
        floorItem.forEach(function(frv) {
            frv.className = 'floor-item';
        })
        this.className = 'floor-item active';
        document.documentElement.scrollTop = section[index + 3].offsetTop - 60;
    })
})

// 回到顶部
var topTimeID = null;
totop.onclick = function() {
    clearInterval(topTimeID);
    topTimeID = setInterval(function() {
        if (document.documentElement.scrollTop > 0) {
            document.documentElement.scrollTop -= 100;
        } else {
            clearInterval(topTimeID);
        }
    }, 10)
}